<!DOCTYPE html>
<html>
	<head>

		<meta charset="UTF-8">
		<style type="text/css">
			/* 每次必做的事 */
			* {
				padding: 0;
				margin: 0;
			}



			.grandfather {

				width: 980px;
				height: 550px;
				margin: 0 auto;
				background: white;
			}
/* father1里的 */

/* 粉色 */
			.pink {
				width: 250px;
				height: 100px;
				background: pink;
				float: left;

			}

			.fatehr1_right{
				width: 650px;
				height: 100px;
				background: white;
				float: right;
			}
/* 蓝色 */
			.sky_blue {
				width: 150px;
				height: 50px;
				background: skyblue;
				float: right;

			}

			
/* /* 紫色 */
			.purple {
				width: 650px;
				height: 50px;
				background: purple;

			}
			
			
			
			
			/* father2里的*/
			.father2 {
				margin-top: 10px;
				box-sizing: border-box;
				margin-bottom: 10px;
			}
/* 黄色 */
			.fatehr2_left {
				width: 320px;
				height: 400px;
				background: yellow;
				float: left;

			}

			.fatehr2_right {
				width: 650px;
				height: 400px;
				background: white;
				float: right;
			}

			.father2_right_up {
				width: 650px;
				height: 350px;
				background: white;

			}
/* 棕色 */
			.father2_right_down {
				width: 650px;
				height: 40px;
				background: saddlebrown;
				margin-top: 10px;

			}

			.father2_right_up_left {
				float: left;
			}
/* 草绿色 */
			.father2_right_up_right {
				width: 240px;
				height: 350px;
				background: yellowgreen;

				float: right;


			}
/* 深粉色 */
			.father2_right_up_left_up {
				width: 400px;
				height: 200px;
				background: deeppink;
			}
/* 深蓝色 */
			.father2_right_up_left_down {
				width: 400px;
				height: 140px;
				background: deepskyblue;
				margin-top: 10px;
			}
             /* father3里的 */
			 /* 橘色 */
			.father_3 {
				width: 980px;
				height: 40px;
				background: orangered;
				margin-top: 10px;
			}
			
			
	/* 清除浮动 */		
			.wall {
							clear: both;
						}
			
		</style>
		<title></title>
	</head>
	<body>
		<div class="grandfather">
<!-- father1 -->
			<div class="father1">
				<!-- 左边 -->
				<div class="father1_left">
					<div class="pink"></div>
				</div>
				<!--  右边-->
					<div class="fatehr1_right">
						<div class="sky_blue"></div>
						<div class="wall"></div>
						<div class="purple"></div>
					</div>
				</div>
			<div class="wall"></div>

<!-- father2 -->
			<div class="father2">
				<!-- 左边 -->
				<div class="fatehr2_left"></div>
				<!-- 右边 -->
				<div class="fatehr2_right">
					<!-- 右边的上 -->
					<div class="father2_right_up">
						<!-- 右边的上—— 左边-->
						<div class="father2_right_up_left">
							<div class="father2_right_up_left_up"></div>
							<div class="father2_right_up_left_down"></div>
						</div>
					<!-- 右边的上—— 左边-->
						<div class="father2_right_up_right"></div>
					</div>
					<!-- 右边的下 -->
					<div class="father2_right_down"></div>
				</div>
			</div>
<!-- father3 -->
			<div class="wall"></div>
			<div class="father_3"></div>
		</div>
	</body>
</html>
